import moment from 'moment';
import {View, Text} from '@tarojs/components';
import {AtIcon} from "taro-ui";
import './index.scss';
import { Tag, Dialog } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";

export default function OrderCard({
                                      order,
                                      isFleetOrder = false,
                                      deleteOrder
                                  }) {
    const {
        stationName = '',
        scheduledChargingTime = '',
        bookTel = '',
        vehiclePlate = '',
        pileCode = '',
        bookVin = '',
        gunNum = '',
        status,
        expired
    } = order;
    return (
        <View className='cardWrap'>
            <View className='cardTitle'>
                <View>
                    <AtIcon prefixClass='icon' value={isFleetOrder ? 'chedui' : 'weixin'} size={18}
                            color={isFleetOrder ? '#048fff' : '#28c445'}/>
                    &nbsp;{stationName}
                </View>
                {
                  status === 0 && expired !==1 && <Tag
                        style={{marginLeft: '6px'}}
                        background='#f8322b'
                        // color='#ffffff'
                        plain
                        onClick={(e) => {
                            e.stopPropagation();
                            console.log('点击预约充电');
                            // deleteOrder(order)
                            Dialog.open('test', {
                                title: '取消预约?',
                                content: '确认取消本次预约充电吗?',
                                onConfirm: () => {
                                    deleteOrder(order);
                                    Dialog.close('test');
                                },
                                onCancel: () => {
                                    Dialog.close('test')
                                },
                            })
                        }}
                    >取消预约</Tag>
                }
            </View>
            <View className='textLine'>
                <View>
                  <Text className='label'>预约时间:</Text> {scheduledChargingTime && moment(scheduledChargingTime).format('YYYY-MM-DD HH:mm')}
                </View>
                <View><Text className='label'>预约电话:</Text> {bookTel}</View>
            </View>
            <View className='textLine'>
                <View><Text className='label'>桩编号:</Text> {pileCode}</View>
                <View><Text className='label'>枪号:</Text> {gunNum}</View>
            </View>
            <View className='textLine'>
                <View><Text className='label'>车牌号:</Text> {vehiclePlate}</View>
                <View><Text className='label'>车架号:</Text> {bookVin}</View>
            </View>
            <View className='textLineLast'>
                <View>
                    <Text className='label'>状态: </Text>
                    {expired === 1 ? <Tag style={{width: "auto"}} background="#999999" color="#ffffff">已过期</Tag> :
                        status === 0 ? <Tag style={{width: "auto"}} type="success">生效中</Tag> :
                        <Tag style={{width: "auto"}} type="warning">已取消</Tag>
                    }
                </View>
            </View>
        </View>
    )
}
